<template>
  <div class="cashDeposit">
    <el-form
      ref="refruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="200"
      :label-position="'top'"
    >
      <el-form-item prop="amount" :label="t('Depositamount')">
        <el-input
          v-model="ruleForm.amount"
          size="large"
          :placeholder="t('pleaseenterthedepositamount')"
        />
      </el-form-item>
      <el-form-item prop="notice" :label="t('paymentmethod')">
        <el-select
          class="select"
          v-model="ruleForm.notice"
          :placeholder="t('pleaseselectpaymentmethod')"
          size="large"
          @change="change"
        >
          <el-option
            v-for="item in info.payconf"
            :key="item.value"
            :label="item.notice"
            :value="item.notice"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="submit-btn">
        <el-button class="btn btnbg" @click="submitForm(refruleForm)" size="large">{{
          t('Confirmdeposit')
        }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import config from '@/config/index.js'
import { ElMessage } from 'element-plus'
import { reactive, ref, onMounted, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const ruleForm = reactive({
  passageway: '',
  code: '',
  excode: '',
  minpay: '',
  payment: '',
  superstore: '',
  uid: '',
  amount: '',
  notice: '',
}) //表单
const refruleForm = ref(null) //表单验证
const rules = reactive({
  amount: [
    {
      required: true,
      message: t('pleaseenterthedepositamount'),
      trigger: 'blur',
    },
  ],
  notice: [
    {
      required: true,
      message: t('pleaseselectpaymentmethod'),
      trigger: 'blur',
    },
  ],
})
// 点击登录
const submitForm = async (formEl) => {
  await formEl.validate((valid, fields) => {
    if (valid) {
      paygetstart()
    } else {
    }
  })
}
onMounted(() => {
  payapi()
  user()
})
// 用户信息
const userInfo = ref({})
const user = () => {
  proxy
    .$post('/mt4/Member/index', {})
    .then((res) => {
      userInfo.value = res.data
      ruleForm.uid = res.data.user_id
    })
    .catch((res) => {})
}
//获取类型
const info = ref({})
const payapi = () => {
  proxy
    .$post('/payment/pay/payapi', {})
    .then((res) => {
      info.value = res.data
      ruleForm.amount = Math.trunc(Number(res.data.minpay))
      ruleForm.minpay = res.data.minpay
      ruleForm.excode = res.data.excode
      ruleForm.code = res.data.codes
      ruleForm.passageway = res.data.passageway
    })
    .catch((res) => {})
}
// 选择类型
const change = (e) => {
  // console.log(e)
  info.value.payconf.forEach((itme) => {
    if (e == itme.notice) {
      console.log(itme)
      ruleForm.payment = itme.payment
      ruleForm.superstore = itme.superstore
      return
    }
  })
}
// 提交
const paygetstart = () => {
  if (ruleForm.amount < Math.trunc(Number(info.value.minpay))) {
    ElMessage({
      message: t('minimumdeposit') + info.value.minpay,
      type: 'error',
    })
    return
  }
  ruleForm.superstore = Number(ruleForm.superstore)
  proxy
    .$post('/payment/pay/paygetstart', ruleForm)
    .then((res) => {
      // window.location.href = 'https://www.google.com';
      console.log(res)
    })
    .catch((res) => {
      let url = config.HTTP_REQUEST_URL + '/payment/pay/paystart/?paydata=' + res
      window.location.href = url
    })
}
</script>

<style scoped lang="scss">
@import '../../../style/scss/payApply.scss';
</style>
